/**
* @title: 报名表详情页
* @description:
* @author JUN
*/


<template>
	<div class="container" v-loading="loading">
		<div class="examTitle">
			<p>考试名称：{{detailsData.ename}}</p>
			<p>考试期数：{{detailsData.epodl}}</p>
			<p>考试时间：{{detailsData.eemtm}}</p>
			<p>主办单位：{{detailsData.eogze}}</p>
			<p>考试费用：{{detailsData.ecost}}</p>
		</div>

		<!-- 分割线 -->
		<el-divider></el-divider>

		<!-- 静态表单 -->
		<el-form class="el-form-list" label-width="100px">
			<div v-for="(item, idx) of publicForm" :key="idx">
				<!-- 文本 -->
				<el-form-item v-if="item.type === 1" :label="item.ndsib">
					<el-input v-model="item.value" :disabled="true"></el-input>
				</el-form-item>

				<!-- 单选 -->
				<el-form-item v-else-if="item.type === 2" :label="item.ndsib">
					<el-radio-group v-model="item.value">
						<el-radio v-for="(items, idxs) in item.optn" :label="items.value" :key="idxs" :value="items.value" :disabled="true">{{ items.key }}</el-radio>
					</el-radio-group>
				</el-form-item>

				<!-- 多选 -->
				<el-form-item v-else-if="item.type === 3" :label="item.ndsib">
					<el-checkbox-group v-model="item.value">
						<el-checkbox v-for="(items, idxs) of item.optn" :label="items.value" :key="idxs" :value="items.value"  :disabled="true">{{ items.key }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>

				<!-- 下拉选项 -->
				<el-form-item v-else-if="item.type === 4" :label="item.ndsib">
					<el-select v-model="item.value" placeholder="请选择活动区域" :disabled="true">
						<el-option v-for="(items, idxs) in item.optn" :label="items.key" :key="idxs" :value="items.value">{{ items.key }}</el-option>
					</el-select>
				</el-form-item>

				<!-- 上传文件 -->
				<el-form-item v-else-if="item.type === 5" :label="item.ndsib">
					<upload :idPic.sync="item.value" :disabled="true"></upload>
				</el-form-item>

				<!-- 日期 -->
				<el-form-item v-else-if="item.type === 6" :label="item.ndsib">
					<el-date-picker v-model="item.value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
				</el-form-item>

				<!-- 多行文本 -->
				<el-form-item v-else-if="item.type === 7" :label="item.ndsib">
					<el-input type="textarea" v-model="item.value" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
			</div>
		</el-form>

		<!-- 分割线 -->
		<el-divider></el-divider>

		<!-- 动态表单 -->
		<el-form class="el-form-list" label-width="100px">
			<div v-for="(item, idx) of specialForm" :key="idx">
				<!-- 文本 -->
				<el-form-item v-if="item.type === 1" :label="item.ndsib">
					<el-input v-model="item.value" :disabled="true"></el-input>
				</el-form-item>
		
				<!-- 单选 -->
				<el-form-item v-else-if="item.type === 2" :label="item.ndsib">
					<el-radio-group v-model="item.value">
						<el-radio v-for="(items, idxs) in item.optn" :label="items.value" :key="idxs" :value="items.value" :disabled="true">{{ items.key }}</el-radio>
					</el-radio-group>
				</el-form-item>
		
				<!-- 多选 -->
				<el-form-item v-else-if="item.type === 3" :label="item.ndsib">
					<el-checkbox-group v-model="item.value">
						<el-checkbox v-for="(items, idxs) of item.optn" :label="items.value" :key="idxs" :value="items.value" :disabled="true">{{ items.key }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
		
				<!-- 下拉选项 -->
				<el-form-item v-else-if="item.type === 4" :label="item.ndsib">
					<el-select v-model="item.value" placeholder="请选择活动区域" :disabled="true">
						<el-option v-for="(items, idxs) in item.optn" :label="items.key" :key="idxs" :value="items.value">{{ items.key }}</el-option>
					</el-select>
				</el-form-item>
		
				<!-- 上传文件 -->
				<el-form-item v-else-if="item.type === 5" :label="item.ndsib">
					<upload :idPic.sync="item.value" :disabled="true"></upload>
				</el-form-item>
		
				<!-- 日期 -->
				<el-form-item v-else-if="item.type === 6" :label="item.ndsib">
					<el-date-picker v-model="item.value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
				</el-form-item>
		
				<!-- 多行文本 -->
				<el-form-item v-else-if="item.type === 7" :label="item.ndsib">
					<el-input type="textarea" v-model="item.value" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
			</div>
		
		
		</el-form>

	</div>
</template>

<script>
	// import {
	// 	getFrom
	// } from "@/api/apiList/exam.js";
	import {
		detail
	} from "@/api/apiList/exam.js";

	import {
		getExaminee,
		signupCaptcha,
		update
	} from "@/api/apiList/user.js";

	import {
		save
	} from "@/api/apiList/exam.js";
	
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapMutations
	} = createNamespacedHelpers('userInfoModule')

	export default {
		name: "signupForm",
		props: {
			modeType: { //模式 (true:提交模式，false:查看模式)
				type: String,
				default: 'true'
			},
			eid: {
				//考试id
				type: String,
				required: true,
			},
			id: {
				//列表id
				type: String,
				required: true,
			},
			// row: { //考试详细信息
			// 	type: String,
			// 	required: true,
			// }
		},
		data() {
			return {
				form: "", //动态表单数据
				userData: {}, //静态表单
				formData: {}, //动态表单
				isEdit: false, //是否为编辑状态
				loading: false,
				dialogVisible: false, //校验弹窗
				codeDialogVisible: false, //验证码弹窗
				errorArr: [],
				submitLoading: false, //提交按钮loading
				detailsData: "", //考试详细数据
				mode: true,
				codeForm: {
					code: ""
				},
				codeFormRules:{
					code:[{ required: true, message: '请输入短信验证码', trigger: 'blur' }]
				},
				time:60,//倒计时
				timeHandlerBool:true,
				timeHandler:"",
				publicForm: "",
				specialForm: ""
			};
		},
		methods: {
			...mapMutations(["UPDATE_USER_INFO"]),
			// async API_getFrom(eid) {
			// 	//考试表格接口
			// 	let result = {
			// 		param: {
			// 			eid,
			// 		},
			// 	};
			// 	return await getFrom(result);
			// },
			async API_getFrom(id) {
				//考试表格接口
				let result = {
					param: {
						id,
					},
				};
				return await detail(result);
			},
			async API_getExaminee() {
				//获取个人信息接口
				return await getExaminee();
			},
			async API_save(data) {
				//报考接口
				let result = {
					data,
					param:{
						code:this.codeForm.code
					}
				};
				return await save(result);
			},
			async API_signupCaptcha(){
				let result = {
					
				}
				return await signupCaptcha(result)
			},
			async API_update(data) { //编辑个人信息
				let result = {
					data, //个人信息
				};
				return await update(result)
			},
			formOptn(arr) {
				//格式化选项
				return arr.map((item) => {
					if (item.type == 2 || item.type == 3) {
						console.log(item)
						let optnArr = item.optn.split(",");
						let optns = [];
						optnArr.forEach((items) => {
							let [value, key] = items.split("-");
							optns.push({
								key: key,
								value: Number(value),
							});
						});
						item.optn = optns;
					}
					if (item.type == 4) {
						let optnArr = item.optn.split(",");
						let optns = [];
						optnArr.forEach((items) => {
							let [value, key] = items.split("-");
							optns.push({
								key: key,
								value: value,
							});
						});
						item.optn = optns;
					}
					if (item.type == 3) {
						//多选
						item.value = [];
					} else {
						item.value = "";
					}
					return item;
				});
			},
			filter(form, userData) {
				//对比过滤(form动态表单,userData静态表单)
				let sForm = form.filter((item) => {
					//过滤出公共数据
					if (item.crer) {
						return item;
					}
				});
				sForm.forEach((item) => {
					let keys = Object.keys(userData);
					let values = Object.values(userData);

					keys.forEach((items, idx) => {
						if (item.name === items) {
							// console.log(item)
							item.value = values[idx]; //动态表单赋值
						}
					});
				});
				return {
					newForm: form,
				};
			},
			getPublicForm(arr){
				let obj = {}
				arr.forEach((item)=>{
					obj[item.name] = item.value
				})
				
				let newObj = Object.assign({},this.userData,obj)
				return newObj
			},
			aFn(arr) {
				if (arr) {
					return arr.filter((item) => {
						return item.ispublic === 1
					})
				}
			},
			bFn(arr) {
				if (arr) {
					return arr.filter((item) => {
						return item.ispublic === 0
					})
				}
			},
			cFn(arr) {
				if (arr) {
					return arr.some((item) => {
						return item.ispublic === 0
					})
				}
			},
		},
		async created() {
			this.loading = true;

			this.detailsData = JSON.parse(this.$store.state.signUpFormDetails.row) //获取考试详细数据

			// console.log(this.detailsData)

			let formRes = await this.API_getFrom(this.id); //获取动态表单
			this.formData = formRes.data.data
			console.log(this.formData)
			
			if (!this.formData) {
				this.$message.error('没有报名表单数据，请联系管理员在后台添加后再查看。');
				this.$router.replace("/home")
			}

			// let formData = this.formOptn(JSON.parse(formRes.data.data.form)); //格式化选项
			let formData = JSON.parse(formRes.data.data.form); //格式化选项
			
			let userRes = await this.API_getExaminee(); //获取静态表单
			this.userData = userRes.data.data;


			console.log(formData)
			let {
				newForm
			} = this.filter(formData, this.userData); //动态表单和静态表单做对比
			console.log(newForm)
			
			this.publicForm = this.aFn(newForm) //公共表单
			this.specialForm = this.bFn(newForm) //特殊表单
			console.log(this.publicForm)
			console.log(this.specialForm)
			this.loading = false;
		},
	};
</script>

<style lang="scss" scoped>
	.examTitle {
		padding: 0 40px;
		box-sizing: border-box;

		p {
			vertical-align: middle;
			font-size: 20px;
			color: #606266;
			line-height: 40px;
			padding: 0 12px 0 0;
			box-sizing: border-box;
		}
	}

	.page-title {
		text-align: center;
	}

	.el-form-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-column-gap: 20px;

	}

	.submit {
		display: flex;
		justify-content: center;
	}
</style>
